<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <%@ include file="../../static/head.jsp" %>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .error {
        color: red;
    }

    .myContainer {
        padding: 4px;
    }

    .submitButton {
        margin-left: 40px;
    }
</style>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <%@ include file="../../static/topNav.jsp" %>
        <!-- Menu -->
        <div class="container menu-nav">
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- <div class="z-navbar-nav-title">$template2.back.menu.title.text</div> -->
                    <ul id="navUl" class="navbar-nav mr-auto">

                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">修改签到任务</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a
                                href="${pageContext.request.contextPath}/index.jsp"> <span
                                class="ti-home"></span>
                        </a></li>
                        <li class="breadcrumb-item"><span>学生签到管理</span></li>
                        <li class="breadcrumb-item active"><span>修改签到任务</span></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container" id="addSignTaskApp">
            <!-- myContainer start -->
            <div class="myContainer">
                <el-form ref="form" :model="form" label-width="124px" :rules="rules">
                    <el-form-item label="签到任务发起人" prop="teacherId">
                        <el-select v-model="form.teacherId" placeholder="请选择签到发起人">
                            <el-option v-for="item in teacherList"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="签到任务名称" prop="description">
                        <el-input v-model="form.description" placeholder="请输入签到任务名称"></el-input>
                    </el-form-item>

                    <el-form-item label="签到时间" prop="signTime">
                        <el-date-picker
                                v-model="form.signTime"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="签到参与人员" prop="participants">
                        <el-transfer v-model="form.participants" :data="stuData"></el-transfer>
                    </el-form-item>
                </el-form>
                <div class="submitButton">
                    <el-row>
                        <el-button type="primary" round @click.native.prevent="submitSignTask('form')">提交</el-button>
                        <el-button round @click="quit">放弃修改</el-button>
                    </el-row>
                </div>
            </div>
            <!-- myContainer end -->
        </div>
        <!-- /Main Content -->
    </div>
    <!-- /Page Content -->
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top"> <span
        class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp" %>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    <%@ include file="../../utils/menu.jsp"%>

    <%@ include file="../../static/setMenu.js"%>

    <%@ include file="../../utils/baseUrl.jsp"%>
    <%@ include file="../../static/md5.js"%>

    const addSignTaskApp = new Vue({
        el: '#addSignTaskApp',
        data() {
            return {
                form: {
                    teacherId: '',
                    description: '',
                    signTime: [],
                    participants: []
                },
                teacherList: [],
                rules: {
                    teacherId: [
                        {required: true, message: '请选择签到发起人', trigger: 'change'}
                    ],
                    description: [
                        {required: true, message: "请输入签到名称", trigger: "blur"}
                    ],
                    signTime: [
                        {required: true, message: "请选择签到时间", trigger: "blur"}
                    ],
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                stuData: [],
                signTaskId: '',
            }
        },
        methods: {
            generateData: function () {
                const data = [];
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: '备选项' + i + '',
                        disabled: i % 4 === 0
                    });
                }
                return data;
            },
            submitSignTask: function (form) {
                const _this = this;
                this.$refs[form].validate((valid) => {
                    // 检验成功
                    if (valid) {
                        // 组装请求参数
                        const postData = {
                            id: _this.signTaskId,
                            teacherId: _this.form.teacherId,
                            description: _this.form.description,
                            startTime: _this.form.signTime[0],
                            endTime: _this.form.signTime[1],
                            participants: _this.form.participants
                        };
                        // 发送请求
                        axios({
                            url: '/jspmk28g8/signTask/update',
                            method: 'post',
                            data: postData,
                            headers: {
                                'Content-Type': 'application/json;charset=UTF-8',
                                'token': window.sessionStorage.getItem('token')
                            }
                        }).then(function (res) {
                            console.debug(res);
                            const {code} = res.data;
                            if (code === 200) {
                                _this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                window.sessionStorage.removeItem('modifySignTask');
                                // 延时跳转
                                setTimeout(function () {
                                    _this.quit()
                                }, 2000);
                            } else {
                                _this.$message({
                                    message: '添加失败',
                                    type: 'error'
                                });
                            }
                        }).catch(function (err) {
                            console.error(err);
                        })

                    } else {
                        return false;
                    }
                });
            },
            quit: function () {
                window.location.href = "${pageContext.request.contextPath}/jsp/modules/xueshengqiandao/list.jsp";
            },
        },
        mounted() {
            const _this = this;
            // 获取修改的数据记录id
            const s = window.sessionStorage.getItem('modifySignTask')
            if (!s) {
                this.$confirm('获取修改数据的id失败，将返回列表', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    showClose: false,
                    closeOnPressEscape: false,
                    closeOnClickModal: false,
                    type: 'warning'
                }).then(() => {
                    window.location.href = "${pageContext.request.contextPath}/jsp/modules/xueshengqiandao/list.jsp";
                })
                return false;
            } else {
                this.signTaskId = s;
                // 获取要修改的记录数据
                axios({
                    url: '/jspmk28g8/signTask/getSignTaskDetail',
                    method: 'get',
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                        'token': window.sessionStorage.getItem('token')
                    },
                    params: {
                        id: s
                    }
                }).then(function (res) {
                    console.debug(res);
                    const {code, data} = res.data;
                    if (code === 200) {
                        _this.form.participants = data.studentIdList;
                        _this.form.teacherId = data.teacherId;
                        _this.form.signTime = [data.startTime, data.endTime]
                        _this.form.description = data.taskDes;
                    } else {
                        _this.$message({
                            message: '获取数据失败',
                            type: 'error'
                        });
                    }
                }).catch(function (err) {
                    console.error(err);
                })
            }

            // 获取签到发起人 -教师列表
            axios({
                url: '/jspmk28g8/jiaoshi/lists',
                method: 'get',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    'token': window.sessionStorage.getItem('token')
                }
            }).then(function (response) {
                // 处理成功情况
                const {code, data} = response.data;
                if (code === 0) {
                    _this.teacherList = []
                    data.forEach(function (item) {
                        _this.teacherList.push({
                            value: item.id,
                            label: item.jiaoshixingming
                        })
                    })
                }
            }).catch(function (error) {
                // 处理错误情况
                console.debug(error);
            }).then(function () {
                // 总是会执行
            });
            // 获取学生列表
            axios({
                url: '/jspmk28g8/xuesheng/lists',
                method: 'get',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    'token': window.sessionStorage.getItem('token')
                }
            }).then(function (response) {
                // 处理成功情况
                const {code, data} = response.data;
                if (code === 0) {
                    _this.stuData = []
                    data.forEach(function (item) {
                        _this.stuData.push({
                            key: item.id,
                            label: item.xueshengxingming
                        })
                    })
                }
            }).catch(function (error) {
                // 处理错误情况
                console.debug(error);
            }).then(function () {
                // 总是会执行
            });
        },
        watch: {}
    })


    $(document).ready(function () {
        $('.dropdown-menu h5').html(window.sessionStorage.getItem('username') + '(' + window.sessionStorage.getItem('role') + ')')
        //设置导航栏菜单
        setMenu();
        <%@ include file="../../static/myInfo.js"%>
    });
    // 用户登出
    <%@ include file="../../static/logout.jsp"%>

</script>
</body>

</html>